<template>
	<view class="content">
		<image class="avatar" :src="avatar"></image>
		<view>
			<text class="nickName">{{nickName}}</text>
		</view>
		<view class="action-area">
			<button
				class="action-btn"
				type="default"
				@click="testOpenSetting"
			>
				检查授权
			</button>
			<!-- #ifdef MP-ALIPAY -->
			<button
				class="action-btn"
				type="default"
				open-type="getAuthorize"
				scope="userInfo"
				@getAuthorize="onGetAuthorize"
			>	
				{{ (avatar === '') ? '支付宝用户获取' : '清除用户信息'  }}
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<button
				class="action-btn"
				type="default"
				disabled=true
			>
				支付宝用户获取
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button
				class="action-btn"
				type="default"
				open-type="getUserInfo"
				@getuserinfo="getWxUserInfo"
			>
				{{ (avatar === '') ? '微信用户获取' : '清除用户信息'  }}
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<button
				class="action-btn"
				type="default"
				disabled=true
			>
				微信用户获取
			<!-- #endif -->
			</button>
			<!-- #ifdef MP-TOUTIAO -->
			<button
				class="action-btn"
				type="default"
				@click="getTtUserInfo"
			>
				{{ (avatar === '') ? '字节跳动用户获取' : '清除用户信息'  }}
			</button>
			<!-- #endif -->
			<!-- #ifndef MP-TOUTIAO -->
			<button
				class="action-btn"
				type="default"
				disabled=true
			>
				字节跳动用户获取
			</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				loadUserInfo: false,
				avatar: '',
				nickName: '',
			}
		},
		onLoad() {
			_this = this;
		},
		methods: {
			testOpenSetting() {
				// 检查用户授权
				uni.openSetting({
					success(res) {
						if (!res || !res.authSetting || !res.authSetting.userInfo) {
							_this.clearUserInfo();
						}
					}
				});
			},
			getWxUserInfo(res) {
				console.log('wx getUserInfo: ', res);
				if (!this.isLoadUserInfo()) {
					this.processUserInfo(res.detail.userInfo);
				}
			},
			onGetAuthorize() {
				if (!_this.isLoadUserInfo()) {
					_this.getAlipayUserInfo();
				}
			},
			getAlipayUserInfo() {
				my.getOpenUserInfo({
					success: function(res) {
						console.log('alipay getOpenUserInfo success, res: ', res.response);
						_this.processUserInfo(JSON.parse(res.response).response);
					},
					fail: function(err) {
						console.log('alipay getOpenUserInfo fail, error: ', err);
					}
				});
			},
			getTtUserInfo() {
				if (!_this.isLoadUserInfo()) {
					tt.login({
						success() {
							tt.authorize({
								scope: 'scope.userInfo',
								success() {
									console.log('tt authorize success');
									tt.login({
										success() {
											tt.getUserInfo({
												success(res) {
													console.log('tt getUserInfo success: ', res.userInfo);
													_this.processUserInfo(res.userInfo);
												},
												fail(res) {
													console.log('tt getUserInfo fail, error: ', res);
												}
											});
										}
									});
								},
								fail(err) {
									console.log('tt authorize fail, error: ', err);
								}
							});
						}
					});
				}
			},
			isLoadUserInfo() {
				const isLoad = this.loadUserInfo;
				if (this.loadUserInfo) {
					this.clearUserInfo();
				}
				return isLoad;
			},
			clearUserInfo() {
				this.avatar = '';
				this.nickName = '';
				this.loadUserInfo = false;
			},
			processUserInfo(userInfo) {
				console.log('process userInfo: ', userInfo);
				if (!userInfo) {
					return;
				}
				this.loadUserInfo = true;
				this.avatar = userInfo.avatar || userInfo.avatarUrl;
				this.nickName = userInfo.nickName;
			}
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}

	.avatar {
  	background: #d8d8d8;
  	width: 168upx;
  	height: 168upx;
  	border-radius: 50%;
  	margin-top: 48upx;
	}

	.nickName {
		font-size: 36upx;
		color: #8f8f94;
	}

	.action-area {
		margin: 20upx auto;
		width: 60%;
	}

	.action-btn {
		margin: 10upx;
	}
</style>
